<template>
    <view class="tab-main">
        <view class="tab-item" v-for="(item, index) in tabList" @click="clickTab(item, index)">
            <view class="tab-name">{{ item[label] }}</view>
            <view class="tab-line" v-if="current == index"></view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    tabList: Object,
    label: {
        default: 'name',
        type: String
    }
})

// 点击tab
const current = ref(0)
const emit = defineEmits(['change'])
const clickTab = (item, index) => {
    current.value = index
    emit('change', { index: current.value, data: item })
}
</script>

<style lang="scss" scoped>
.tab-main {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: scroll;
    flex-wrap: nowrap;
    // width: 100%;
    // padding: 30rpx 0;

    .tab-item {
        margin-right: 68rpx;
        box-sizing: border-box;
        position: relative;
        // min-width: 64rpx;

        .tab-name {
            font-family: PingFang SC Bold;
            font-size: 32rpx;
            font-weight: 900;
            color: #111111;
        }

        .tab-line {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 12rpx;
            opacity: .8;
            background: #0753FD;
        }
    }
}
</style>